<template>
  <div>
    <tab-bar :nav-name="navName"></tab-bar>
    <div class="content">
      <!-- <transition :name="transitionName"> -->
      <router-view class="box-view"></router-view>
      <!-- </transition> -->
    </div>
  </div>
</template>
<script>
import TabBar from '@/components/TabBar'

export default {
  name: 'Body',
  components: {
    TabBar
  },
  data () {
    return {
      navName: [
        {title: '卡包', path: 'CardHolder', iconClass: 'tab-bag'},
        {title: '活动', path: 'Activity', iconClass: 'tab-activity'},
        {title: '交易', path: 'Trade', iconClass: 'tab-transaction'},
        {title: '我的', path: 'Personal', iconClass: 'tab-personal'}
      ],
      transitionName: 'box-slide-left'
    }
  },
  watch: {
    '$route' (to, from) {
      const toLevel = to.meta.level.toString()
      const fromLevel = from.meta.level === undefined ? '0' : from.meta.level.toString()
      if (toLevel.length === fromLevel.length) {
        if (toLevel > fromLevel) {
          this.transitionName = 'box-slide-left'
        } else if (toLevel < fromLevel) {
          this.transitionName = 'box-slide-right'
        }
      } else if (toLevel.length > fromLevel.length) {
        this.transitionName = 'box-slide-left'
      } else if (toLevel.length < fromLevel.length) {
        this.transitionName = 'box-slide-right'
      }
    }
  }
}
</script>
<style lang="less">
  body {
    width: 100%;
    background: #f0f4f7;
    color: #a9a9a9;
    font-family: "黑体","微软雅黑",Arial, Helvetica, sans-serif;
    font-size: 13px;
  }
  .pos-r {
    position: relative;
  }
  .box-view {
    position: absolute;
    width:100%;
    height: 100%;
    transition: all .8s cubic-bezier(.55,0,.1,1);
    // -webkit-overflow-scrolling: touch;
  }
  .box-slide-left-enter, .box-slide-right-leave-active {
    // opacity: 0;
    transform: translate(100%, 0);
  }
  .box-slide-left-leave-active, .box-slide-right-enter {
    // opacity: 0;
    transform: translate(-100%, 0);
  }
</style>